<template>
    <div class="box">
        <el-menu
            class="el-menu-vertical-demo"
            background-color="#304156"
            text-color="#ffffff"
            active-text-color="#4F9FF6"
            :default-active="$route.path"
            :collapse="isCollapse"
            unique-opened
            router>
            <el-menu-item index="/admin">
                <icon-font class="icon" href="#cezhuye"></icon-font>
                <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="/admin/user">
                <template slot="title">
                    <icon-font class="icon" href="#ceyonghu1"></icon-font>
                    <span slot="title">用户相关操作</span>
                </template>
                <el-menu-item index="/admin/user/account" v-if="hasPermission('USER_OPERATE')">
                    <span slot="title">账号管理</span>
                </el-menu-item>
                <el-menu-item index="/admin/user/user_role" v-if="hasPermission('USER_ROLE_OPERATE')">
                    <span slot="title">用户角色管理</span>
                </el-menu-item>
                <el-menu-item index="/admin/user/role" v-if="hasPermission('ROLE_OPERATE')">
                    <span slot="title">角色管理</span>
                </el-menu-item>
                <el-menu-item index="/admin/user/role_permission" v-if="hasPermission('ROLE_PERMISSION_OPERATE')">
                    <span slot="title">角色权限管理</span>
                </el-menu-item>
                <el-menu-item index="/admin/user/permission" v-if="hasPermission('PERMISSION_OPERATE')">
                    <span slot="title">权限管理</span>
                </el-menu-item>
            </el-submenu>
            <el-menu-item index="/admin/area" v-if="hasPermission('AREA_OPERATE')">
                <icon-font class="icon" href="#cequyu"></icon-font>
                <span slot="title">区域管理</span>
            </el-menu-item>
            <el-menu-item index="/admin/label" v-if="hasPermission('LABEL_OPERATE')">
                <icon-font class="icon" href="#cebiaoqian"></icon-font>
                <span slot="title">标签管理</span>
            </el-menu-item>
            <el-submenu index="/admin/post">
                <template slot="title">
                    <icon-font class="icon" href="#cetiezi"></icon-font>
                    <span slot="title">帖子相关操作</span>
                </template>
                <el-menu-item index="/admin/post" v-if="hasPermission('POST_OPERATE')">
                    <span slot="title">帖子管理</span>
                </el-menu-item>
                <el-menu-item index="/admin/post/reply" v-if="hasPermission('REPLY_OPERATE')">
                    <span slot="title">评论管理</span>
                </el-menu-item>
            </el-submenu>
        </el-menu>
        <div class="bottom"></div>
    </div>
</template>

<script>
    import { mapGetters } from 'vuex'

    export default {
        name: 'adminMenu',
        props: {
            isCollapse: {
                type: Boolean,
                require: false,
                default: true
            }
        },
        computed: {
            ...mapGetters({
                hasPermission: 'user/hasPermission'
            })
        }
    }
</script>

<style lang="scss" scoped>
    .box {
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        height: 100vh;

        .el-menu-vertical-demo:not(.el-menu--collapse) {
            width: 250px;
            min-height: 100%;
            flex: 0 0 auto;
        }

        .bottom {
            box-sizing: border-box;
            width: 100%;
            border-right: #ffffff 1px solid;
            flex-grow: 1;
            background-color: #304156;
        }
    }

    .icon {
        margin-right: 5px;
        width: 24px;
        text-align: center;
        font-size: 18px;
        vertical-align: middle;
    }
</style>
